<template>
  <div class="container-tags">
    <el-card>
      <el-form :inline="true" :model="reqParams" class="demo-form-inline">
        <el-form-item label="标签名称">
          <el-input v-model="reqParams.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="reqParams.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="delSubmit()">清除</el-button>
          <el-button type="primary" @click="onSubmit()">搜索</el-button>
        </el-form-item>

        <!-- 新增标签按钮 -->
        <el-button
          style="float: right"
          @click="handleAddAndEdit('add')"
          type="success"
          icon="el-icon-edit"
          size="small"
        >新增标签</el-button>

        <!-- 弹窗 -->
        <el-dialog
        :title="showTitle"
        :visible.sync="dialogVisible"
        width="30%">
            <el-form :model="form" :rules="rules" ref="form">

               <el-form-item prop="subjectID" label="所属学科">
                <el-select v-model="form.subjectID" placeholder="请选择">
                  <el-option v-for="item in tagsList" :key='item.value' :label="item.label" :value="item.value">{{item.label}}</el-option>
                   </el-select>
              </el-form-item>

              <el-form-item  prop="tagName" label="目录名称">
                <el-input v-model="form.tagName" autocomplete="off" placeholder="请输入目录名称" ></el-input>
              </el-form-item>
            </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
          </span>
        </el-dialog>

        <el-alert
          :title="`数据一共${total}条`"
          type="info"
          :closable="false"
          show-icon
        ></el-alert>
      </el-form>
      <el-table :data="subjectList">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <!-- <el-table-column label="标签姓名" prop=""></el-table-column> -->
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template #default="{row}">{{row.state===1?'已启用':'已禁用'}}</template></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="text" @click="toggleState(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
            <el-button type="text" @click="handleAddAndEdit('edit',scope.row)" :disabled="scope.row.state===1"
              >修改</el-button
            >
            <el-button type="text" @click="handleDel(scope.row.id)" :disabled="scope.row.state===1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pager"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 50]"
        :current-page="reqParams.page"
        layout="prev, pager, next, sizes,jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 需要 5条 10条 20条 50条 尺码选择-->
      <!-- 监听页面尺寸改变 size-change -->
    </el-card>
  </div>
</template>

<script>
// import { status } from '../../api/hmmm/constants'
import { list as tagsList, remove as tagsDel, addSubject, updateSubject, simple as getTag, changeState } from '@/api/hmmm/tags.js'
export default {
  name: 'tags-page',
  data () {
    return {
      showTitle: '',
      dialogVisible: false,
      // 筛选参数
      reqParams: {
        // 学科名称，关键字
        tagName: null,
        // 状态，是否禁用
        state: null,
        // 页码
        page: 1,
        // 尺寸
        pagesize: 10
      },
      // 标签列表
      tagsList: [],
      // 总条数
      total: 0,
      // 所属学科列表
      subjectList: [],
      form: {
        id: '',
        subjectID: '',
        tagName: ''
      },
      rules: {
        subjectName: [{ required: true, message: '请选择所属学科', trigger: 'change' }],
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
        subjectID: [{ required: true, message: '请选择所属学科', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getSubjectList()
    this.getTagList()
  },
  methods: {
    async toggleState (tag) {
      await changeState({
        id: tag.id,
        state: tag.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      tag.state = tag.state === 1 ? 0 : 1
    },
    formatter (row) {
      if (row.state === '1') { return '启用' }
      if (row.state === '0') { return '禁用' }
    },

    // 添加或编辑提交时
    async handleConfirm () {
      console.log(111)
      await this.$refs.form.validate()
      await addSubject()
      this.getSubjectList()
      let subApi
      if (this.type === 'add') {
        subApi = addSubject
      } else {
        subApi = updateSubject
      }
      try {
        await subApi({ ...this.form })
      } catch (error) {
        console.error(error)
      } finally {
        this.dialogVisible = false
        this.delSubmit()
        this.getSubjectList()
      }
    },

    // 获取表格数据
    async getSubjectList () {
      // api目录中的函数和接口相关，api函数是以对象方式传递
      const { data } = await tagsList(this.reqParams)
      this.subjectList = data.items
      this.total = data.counts
      // 给data中的数据赋
    },

    // 获取标签列表
    async getTagList () {
      // api目录中的函数和接口相关，api函数是以对象方式传递
      const { data } = await getTag()
      // 给data中的数据赋
      this.tagsList = data
    },

    // 尺码
    handleSizeChange (newSize) {
      this.reqParams.page = 1
      this.reqParams.pagesize = newSize
      this.getSubjectList()
    },
    // 分页
    handleCurrentChange (newPage) {
      this.reqParams.page = newPage
      this.getSubjectList()
    },

    // 搜索
    onSubmit () {
      /* 页码改成第一页
      在此业务中 关键字是双向绑定的 如果其他页面有需要改动的参数在搜索前改即可
      */
      this.reqParams.page = 1
      this.getSubjectList()
    },
    // 清除
    delSubmit () {
      // 变回原来的数据
      this.reqParams.tagName = null
      this.reqParams.state = ''
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 点击添加或者编辑
    async handleAddAndEdit (type, row) {
      this.dialogVisible = true
      // 记录下type 根据他的类型动态计算出标题名称
      this.type = type
      if (type === 'add') {
        this.showTitle = '增加目录'
      } else if (type === 'edit') {
        this.showTitle = '修改目录'

        this.reqParams.tagName = row.tagName
        this.reqParams.subjectName = row.subjectName
      }
    },
    handleDel (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await tagsDel({ id })
          this.$message({
            message: '删除成功',
            type: 'success'
          })

          this.getSubjectList()
        })
        .catch((e) => {})
    }
  }
  // computed: {
  //   // showTitle = this.type === 'add' ? '新增' : '修改'
  //   showTitle () {
  //     let title = ''
  //     switch (this.type) {
  //       case 'add':
  //         title = '新增目录'
  //         break
  //       case 'edit':
  //         title = '编辑目录'
  //         break
  //     }

  //     return title
  //   }
  // }
}
</script>

<style scoped lang="scss">

::v-deep .el-form-item__content {
  width:217px;
}
.container-tags {
  padding: 20px;
  // background-color: #fff;
  .is-light {
    margin-bottom: 15px;
  }
  .has-gutter {
    background-color: #f4f4f5;
  }
  .pager {
    margin: 15px 0;
    float: right;
  }
  .el-link {
    padding-right: 10px;
  }
}
</style>
